{template 'web/'.$cfg['floder'].'/base_menu'}
<script src="{MODULE_URL}template/resources/highcharts/highcharts.js"></script>
<script src="{MODULE_URL}template/resources/js/json.js"></script>
<div class="top_tab"> 
  <a href="{php echo $this->createWebUrl('salegoods')}" class="layui-btn {if $operation != 'display'}layui-btn-primary{/if}">产品统计</a> 
</div>
<style>
.panelbox-head a{ margin-right:10px}
.green{ color:#090}
.orange{ color:#F60}
.showbox{ margin-right:10px; background:#EEE; padding:10px 20px;}
.showbox2{margin-right:10px;}
.showbox h3{ font-size:12px; text-align:left; margin:20px 0 30px 0}
.showbox h3 b{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#F60}
h2{ font-size:18px; margin:10px;}
</style>
{if $operation == 'display'}
<div class="panelbox">
<form action="" method="post" class="layui-form" enctype="multipart/form-data">
  <div class="panelbox-head form-inline">
  	<a href="javascript:output(0)" class="layui-btn layui-btn-small"><i class="layui-icon">&#xe601;</i> 导出</a>
    <div class="layui-btn-group selecttime">
      <button type="button" class="layui-btn {if $_GPC['datetype']!=1}layui-btn-primary{/if} layui-btn-small">今天</button>
      <button type="button" class="layui-btn {if $_GPC['datetype']!=2}layui-btn-primary{/if} layui-btn-small">昨天</button>
      <button type="button" class="layui-btn {if $_GPC['datetype']!=3}layui-btn-primary{/if} layui-btn-small">近7天</button>
      <button type="button" class="layui-btn {if $_GPC['datetype']!=4}layui-btn-primary{/if} layui-btn-small">其他</button>
    </div>
    <span id="top_time" {if $_GPC['datetype']!=4}style="display: none"{/if}>{php echo tpl_form_field_daterange('gametime', array('start' => date('Y-m-d',$starttime),'end'=>date('Y-m-d',$endtime)),false)} </span>

      <select id="keytype" style="display:inline-block;" lay-ignore class="form-control">
          <option value="" {if $_GPC['keytype']}selected{/if}>搜索范围</option>
          <option value="1" {if $_GPC['keytype']==1}selected{/if}>商品</option>
          <option value="2" {if $_GPC['keytype']==2}selected{/if}>会员</option>
      </select>
      <input type="text" name="keyword" value="{$_GPC['keyword']}" class="form-control" placeholder="请输入关键字"/> <button type="button" onclick="getpage()" class="layui-btn layui-btn-danger layui-btn-small">查询</button>
    <input type="hidden" name="dateselect" value="{$_GPC['datetype']}" />
  </div>
  <div class="panelbox-body">
  	<h2>产品销售统计</h2>
      <div class="row goodbox">
          <div class="col-md-6">
              <div class="showbox">
                  <p>商品数量</p>
                  <h3><b>{php echo intval($item['num2'])}</b> </h3>
              </div>
          </div>
          <div class="col-md-6">
              <div class="showbox">
                  <p>销售金额</p>
                  <h3>￥ <b>{php echo $this->_2money($item['num1'])}</b> </h3>
              </div>
          </div>
      </div>
  </div>
  </form>
</div>
{if $memberlist}
<div class="panelbox">
    <div class="panelbox-head">搜索会员</div>
    <div class="panelbox-body">
        <div class="layui-form">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>UID</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>卡号</th>
                    <th>微信卡号</th>
                </tr>
                </thead>
                <tbody>
                {loop $memberlist $row}
                <Tr>
                    <td>{$row['uid']}</td>
                    <td>{$row['realname']}</td>
                    <td>{$row['mobile']}</td>
                    <td>{$row['cardno']}</td>
                    <td>{$row['wxcardno']}</td>
                </Tr>
                {/loop}
                </tbody>
            </table>
        </div>
    </div>
</div>
{/if}
<div class="panelbox">
    <div class="panelbox-head">分类销售汇总</div>
    <div class="panelbox-body">
        <div class="layui-form">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>分类名称</th>
                    <th>销售金额</th>
                    <th>数量</th>
                </tr>
                </thead>
                <tbody>
                {loop $goodary2 $index $row}
                <Tr>
                    <td>#</td>
                    <td>{php echo $goodary[$index]}</td>
                    <td>{php echo $this->_2money($row)}</td>
                    <td>{php echo $goodary3[$index]}</td>
                </Tr>
                {/loop}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="panelbox">
    <div class="panelbox-head">商品销售汇总</div>
	<div class="panelbox-body">
        <div class="layui-form">
            <table class="layui-table" id="mytable" lay-filter="mytable">
                <thead>
                <tr>
                    <th lay-data="{field:'id', width:100, sort: true}">分类</th>
                    <th lay-data="{field:'a1', width:150,}">条码</th>
                    <th lay-data="{field:'a2', width:200,}">名称</th>
                    <th lay-data="{field:'a3', width:80,}">单价</th>
                    <th lay-data="{field:'a4', width:120, sort: true}">销售金额</th>
                    <th lay-data="{field:'a5',  width:100,sort: true}">数量</th>
                </tr>
                </thead>
                <tbody id="salelist">
                {loop $goodlist $row}
                <Tr>
                    <td>{php echo $goodary[$row['pcate']]}</td>
                    <td>{$row['goodsn']}</td>
                    <td>{$row['title']}</td>
                    <td>{$row['marketprice']}</td>
                    <td>{php echo $this->_2money($row['num1'])}</td>
                    <td>{$row['num2']}</td>
                </Tr>
                {/loop}
                </tbody>
            </table>
        </div>
    </div>
  </div>
</div>
<script language="javascript">
$(".selecttime button").on("click",function(){
	var val=$(this).index()+1;
	$("input[name='dateselect']").val(val);
	$(this).removeClass("layui-btn-primary").siblings().addClass("layui-btn-primary");
	if($(this).text()!="其他"){
		getpage();
	}else{
        $("#top_time").show();
    }
});
layui.use(['layer', 'laypage', 'element','form','table'], function(){
  var layer = layui.layer
  ,laypage = layui.laypage
  ,element = layui.element
  ,form = layui.form;
    var table = layui.table;
    table.init('mytable');
  form.on('submit(submitbtn)', function(data){

    return true;
  });
});
function getpage(){
	var index2=layer.load(1, {shade: [0.1,'#fff']});
    var url="{php echo $this->createWebUrl('salegoods')}&datetype="+$("input[name='dateselect']").val()+"&statrtime="+$("input[name='gametime[start]']").val()+"&endtime="+$("input[name='gametime[end]']").val()+"&keyword="+$("input[name='keyword").val()+"&keytype="+$("#keytype option:selected").val();
	location.href=url;
}
function output(){
    window.open("{php echo $this->createWebUrl('salegoods',array('op'=>'outputs'))}&datetype="+$("input[name='dateselect']").val()+"&statrtime="+$("input[name='gametime[start]']").val()+"&endtime="+$("input[name='gametime[end]']").val()+"&keyword="+$("input[name='keyword").val());
}
function showPicture(a,b){
	var goods=a;
	var goods2=b;
	if(goods){
		var atitle=[];
		var series=[];
		var series2=[];
		for(var i in goods){
			if(goods[i].goodid=='0'){
				atitle.push('无条码');
			}else{
				atitle.push(goods[i].title);
			}
			series.push(parseInt(goods[i].num2));
			series2.push(parseInt(goods[i].num1)*0.01);
		}
		$('#container1').highcharts({
			chart: {
				type: 'column'
			},
			title: {
				text:'商品销售量TOP10'
			},
			subtitle:null,
			xAxis: {
				categories: atitle,
				crosshair: true
			},
			yAxis: {
				min: 0,
				title: {
					text: '销售量 (份)'
				}
			},
			tooltip: {
				pointFormat: '{series.name}:<b>{point.y:.1f} 份</b>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '销量',
				data: series
			}]
		});
		
		$('#container2').highcharts({
			chart: {
				type: 'column'
			},
			title: {
				text:'商品销售金额TOP10'
			},
			subtitle:null,
			xAxis: {
				categories:atitle,
				crosshair: true
			},
			yAxis: {
				min: 0,
				title: {
					text: '金额 (元)'
				}
			},
			tooltip: {
				pointFormat: '{series.name}:<b>{point.y:.1f} 元</b>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '金额',
				data: series2
			}]
		});
	}
	if(goods2){
		var goodlist=eval("("+'{php echo json_encode($goodary)}'+")");
		var series=[];
		var series2=[];
		for(var i in goods2){
			var temp=[goodlist[goods2[i].pcate],parseInt(goods2[i].num2)];
			series.push(temp);
			var temp2=[goodlist[goods2[i].pcate],parseInt(goods2[i].num1)];
			series2.push(temp2);
		}
		$('#container3').highcharts({
			chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false
			},
			title: {
				text: '类别销量比例'
			},
			tooltip: {
				headerFormat: '{series.name}<br>',
				pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
						}
					}
				}
			},
			series: [{
				type: 'pie',
				name: '类别销量比例',
				data: series
			}]
		});
		$('#container4').highcharts({
			chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false
			},
			title: {
				text: '类别销售额比例'
			},
			tooltip: {
				headerFormat: '{series.name}<br>',
				pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
						}
					}
				}
			},
			series: [{
				type: 'pie',
				name: '类别销售额比例',
				data: series2
			}]
		});
	}
}
</script>

{/if}